<template>
  <div>
    <h1>User Info</h1>
    <p>Logged in as: {{ user.userInfo }}</p>
    <RouterLink to="/person">个人中心</RouterLink>
    <button @click="login">Login</button>
    <button @click="logout">Logout</button>

    <h1>Shopping Cart</h1>
    <p>Total Items: {{ cart.totalItems }}</p>
    <p>Total Price: ${{ cart.totalPrice }}</p>
    <button @click="addItemToCart">Add Item</button>
    <button @click="clearCart">Clear Cart</button>
  </div>
</template>

<script setup>
import { useUserStore } from '@/stores/userStore'
import { useCartStore } from '@/stores/cartStore'

const user = useUserStore()
const cart = useCartStore()

function login() {
  user.login('Alice', 25)
}

function logout() {
  user.logout()
}

function addItemToCart() {
  cart.addItem({ id: Date.now(), name: 'Product', price: 10 })
}

function clearCart() {
  cart.clearCart()
}
</script>
